<template>
	<view class="page">
		<view class="bodys">
			<!-- 顶部搜索+筛选 -->
			<view class="title">
				<view class="title_left">
					<input type="number" placeholder="请输入订单编号" class="input" v-model="number" />
					<uni-icons type="search" size="22" class="icon" @click="sousuo"></uni-icons>
				</view>
				<view class="title_right" @click="sift_open">
					<view class="">
						筛选
					</view>
					<view class="title_right_img">
						<image src="../../static/order/shaixuan.png" mode="" class="image"></image>
					</view>
				</view>
			</view>
			<checkbox-group @change="checkboxChange">
				<view class="cont" v-for="(item,index) in tradeList" :key="item.index">
					<view class="cont_body justify-content-start">
						<view class="cont_body_left">
							<checkbox :value="item.value" :checked="item.checked" class="circle"
								style="transform:scale(0.8)" />
						</view>
						<view class="cont_body_right">
							<view class="order_title">
								<view class="order_id justify-content-start">
									订单编号 :
									<view class="order_id_right">
										{{item.order_sn}}
									</view>

									<view class="copy_image" @click="copy(item.order_sn)">
										<image src="../../static/index/copy.png" mode="" class="img"></image>
									</view>
								</view>
								<view class="order_status" :class="item.pay_status==0?'red':'green'">
									{{item.pay_status==0?'待付款':'已付款'}}
								</view>
							</view>
							<view class="order_cont">
								<view class="order_cont_left">
									购买商品 :
								</view>
								<view class="order_cont_right justify-content-start">
									{{item.goods_title}}
									<view class="copy_image" @click="copy(item.goods_title)">
										<image src="../../static/index/copy.png" mode="" class="img"></image>
									</view>
								</view>
							</view>
							<view class="order_cont">
								<view class="order_cont_left">
									下单时间 :
								</view>
								<view class="order_cont_right">
									{{item.createdate}}
								</view>
							</view>
							<view class="order_cont">
								<view class="order_cont_left">
									支付方式 :
								</view>
								<view class="order_cont_right">
									{{item.pay_type=="minwechat"?'微信':'支付宝'}}
								</view>
							</view>
							<view class="order_cont">
								<view class="order_cont_left">
									支付时间 :
								</view>
								<view class="order_cont_right">
									{{item.paydate}}
								</view>
							</view>
							<view class="order_cont">
								<view class="order_cont_left">
									交易地点:
								</view>
								<view class="order_cont_right">
									{{item.user_address}}
								</view>
							</view>
							<view class="order_cont ">
								<view class="order_cont_money red">
									<text style="font-size: 12px;color: #FF4600;">￥</text>{{item.total_amount}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</checkbox-group>
		</view>
		<view class="bto justify-content-sp">
			<view class="bto_left">
				<!-- <checkbox-group @change="choose_isAll">
					<label>
						<checkbox value="isAll" :checked="isAll" style="transform:scale(0.7)" />全选
					</label>
				</checkbox-group> -->
				<view class="btn_css" @click="choose_isAll()">
					全选
				</view>
			</view>
			<view class="bto_right">
				<view class="btn_css" @click="del">
					删除
				</view>
			</view>
		</view>
		<view style="height: 114.5px;">
		</view>
		<uni-popup ref="popup" type="bottom" border-radius="10px 10px 0 0">
			<view class="pupup">
				<view class="popup_title">
					支付状态
				</view>
				<view class="popup_title_cont">
					<view class="popup_title_cont_text" v-for="(item,index) in order_status_list" :key="item.index">
						<view class="popup_title_cont_text_" :class="order_status == item.value?'selected':''"
							@click="choose_order_status(item.value)">
							{{item.text}}
						</view>
					</view>
				</view>
				<view class="popup_title">
					支付方式
				</view>
				<view class="popup_title_cont">
					<view class="popup_title_cont_text" v-for="(item,index) in pay_list" :key="item.index">
						<view class="popup_title_cont_text_" :class="pay_way == item.value?'selected':''"
							@click="choose_pay_way(item.value)">
							{{item.text}}
						</view>
					</view>
				</view>
				<view class="popup_bot justify-content-sp">
					<view class="btn_css btn_1" @click="btn(1)">
						重置
					</view>
					<view class="btn_css" @click="btn(2)">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		getSellerOrder,
		getDelOrder
	} from '@/api/transaction/index.js'
	export default {
		data() {
			return {
				isAll: false,
				number: '',
				value: 0,
				order_status: 0,
				order_status_list: [{
					"value": 0,
					"text": "待付款"
				}, {
					"value": 1,
					"text": "已付款"
				}, {
					"value": -1,
					"text": "已取消"
				}],
				pay_way: '',
				pay_list: [{
					"value": 'minwechat',
					"text": "微信"
				}, {
					"value": 'alipay',
					"text": "支付宝"
				}, {
					"value": 'h5wechat',
					"text": "银行卡"
				}],
				tradeList: [],
				page: 1, //页数
				indexList: []
			}
		},
		onLoad() {
			this.init();
		},
		// 页面上拉触底方法
		onReachBottom() {
			this.page++;
			this.init();
		},
		methods: {
			// 获取订单列表
			init() {
				var data = {
					page: this.page,
					pageSize: 10,
					order_id: this.number,
					pay_way: this.pay_way,
					pay_ststus: this.order_status
				}
				getSellerOrder(data).then(res => {
					for (var i = 0; i < res.data.length; i++) {
						res.data[i].checked = false;
					};
					this.tradeList.push(...res.data);
				})
			},
			// 复制到剪贴板
			copy(e) {
				console.log(e);
				uni.setClipboardData({
					data: e,
					success: function() {
						console.log(e);
					}
				});
			},
			choose_isAll(e) {
				this.isAll = !this.isAll;
				if (this.isAll) {
					for (var i = 0; i < this.tradeList.length; i++) {
						this.tradeList[i].checked = true;
						this.indexList.push(this.tradeList[i].id);
					}
				} else {
					for (var i = 0; i < this.tradeList.length; i++) {
						this.tradeList[i].checked = false
					};
					this.indexList = []
				}
			},
			checkboxChange: function(e) {
				var values = e.detail.value;
				this.indexList = e.detail.value;
				for (var i = 0, lenI = this.tradeList.length; i < lenI; ++i) {
					const item = this.tradeList[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
			},
			// 删除订单
			del() {
				console.log(111, this.indexList);
				let newArr = this.indexList.join(',');
				console.log(newArr);
				var data = {
					id: newArr
				}
				getDelOrder(data).then(res => {
					uni.showToast({
						"icon": "none",
						"title": res.msg,
						"duration": 1500
					})
					this.page = 1;
					this.tradeList = [];
					this.init();
				})
			},
			// 搜索
			sousuo() {
				this.page = 1;
				this.tradeList = [];
				this.init();
			},
			// 打开筛选弹框
			sift_open() {
				this.$refs.popup.open('top')
			},
			// 选择订单状态
			choose_order_status(e) {
				this.order_status = e
			},
			// 选择支付方式
			choose_pay_way(e) {
				console.log(111);
				this.pay_way = e
			},
			btn(e) {
				if (e == 1) {
					this.order_status = 0;
					this.pay_way = 0
				} else if (e == 2) {
					this.$refs.popup.close('top')
					this.number = '';
					this.page = 1;
					this.tradeList = [];
					this.init();
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		min-height: 100%;

		.bodys {
			margin: 30rpx;

			.title {
				display: flex;
				justify-content: space-between;

				.title_left {
					display: flex;

					.input {
						background-color: white;
						padding: 10rpx 30rpx;
						height: 22px;
						width: 350rpx;
						border-radius: 50rpx 0 0 50rpx;
						font-size: 12px;
					}

					.icon {
						padding: 10rpx 30rpx;
						background-color: white;
						border-radius: 0 50rpx 50rpx 0;
					}
				}

				.title_right {
					padding: 10rpx 15rpx;
					font-size: 15px;
					display: flex;

					.title_right_img {
						height: 15px;
						width: 15px;
						padding: 0 10rpx;

						.image {
							height: 100%;
							width: 100%;
						}
					}
				}
			}

			.cont {
				margin: 30rpx 0;
				background-color: white;
				border-radius: 10rpx;
				box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.3);

				.cont_body {
					padding: 30rpx;
					font-size: 12px;

					.cont_body_left {
						display: flex;
						flex-direction: column;
						justify-content: center;
					}

					.cont_body_right {
						width: 100%;

						.order_title {
							display: flex;
							justify-content: space-between;

							.order_id {
								color: #5E5E5E;

								.order_id_right {
									color: #000000;
									padding-left: 2px;
								}
							}

							.order_status {
								font-size: 13px;
							}

							.red {
								color: #FA0101EF;
							}

							.agree {
								color: #0A9666EF;
							}
						}

						.order_cont {
							line-height: 23px;
							display: flex;


							.order_cont_left {
								color: #5E5E5E;
							}

							.order_cont_right {
								width: 200px;
								color: #000000;
								padding-left: 2px;
								white-space: nowrap;
								text-overflow: ellipsis;
								overflow: hidden;
							}

							.order_cont_money {
								font-size: 20px;
								margin-top: 3px;
								color: #FF4600;
							}

							.btn_css {
								background-color: #ff6433;
								color: white;
								border-radius: 30rpx;
								padding: 10rpx 20rpx;
								text-align: center;
							}
						}
					}


				}
			}
		}

		.pupup {
			background-color: white;
			padding: 30rpx;

			.popup_title {}

			.popup_title_cont {
				padding: 30rpx 0;
				display: flex;

				.popup_title_cont_text {
					margin-left: -10px;

					.popup_title_cont_text_ {
						margin: 0 10px;
						background-color: #f2f2f2;
						padding: 15rpx 30rpx;
						border-radius: 30rpx;
					}

					.selected {
						color: #ff693a;
						background-color: #ffebe5;
					}
				}
			}

			.popup_bot {
				padding: 20px 0;

				.btn_css {
					width: 50%;
					border: 1px solid #ff693a;
					background-color: #ff6433;
					color: white;
					border-radius: 30rpx;
					padding: 10px;
					margin: 0 30rpx;
					text-align: center;
				}

				.btn_1 {
					background-color: white;
					color: #ff693a;
				}
			}
		}

		.bto {
			width: 100%;
			position: fixed;
			background-color: white;
			bottom: 0;
			margin-bottom: 50px;

			.bto_left {
				padding: 30rpx;
				font-size: 17px;

				.btn_css {
					background-color: #0c65f6;
					color: white;
					padding: 10rpx 30rpx;
					border-radius: 30rpx;
				}
			}

			.bto_right {
				padding: 30rpx;

				.btn_css {
					background-color: #ff4b12;
					color: white;
					padding: 10rpx 30rpx;
					border-radius: 30rpx;
				}
			}

		}
	}
</style>